<div>
  <app-mrcondition
    [(currentlist)]="current.conditions"
    [showSelect]="false"
  ></app-mrcondition>
  <br />
  <div style="background-color: lightyellow">
    <div>
      <span style="display: inline-block; width: 25px">
        <button
          type="button"
          style="height: 20px; width: 20px; padding: 0"
          (click)="addStatistic()"
        >
          +
        </button>
      </span>
      <span style="display: inline-block; width: 30%; margin-left: 10px">{{
        store.currentLanguage.show
      }}</span>
      <!-- <span style="display: inline-block; width: 20%; text-align: center;"
        >Target</span
      > -->

      <span style="display: inline-block; width: 25%; margin-left: 10px">{{
        store.currentLanguage.statisticname
      }}</span>

      <span style="display: inline-block; width: 15%; margin-left: 10px">{{
        store.currentLanguage.statistictype
      }}</span>

      <span style="display: inline-block; width: 20%; margin-left: 10px">{{
        store.currentLanguage.parameter
      }}</span>
    </div>
    <div *ngFor="let item of current.terms" style="margin-top: 5px">
      <div>
        <span style="display: inline-block; width: 25px">
          <button
            type="button"
            style="height: 20px; width: 20px; padding: 0"
            aria-label="home"
            (click)="remove(item)"
          >
            −
          </button>
        </span>
        <span style="display: inline-block; width: 30%; margin-left: 10px">{{
          item.show
        }}</span>
        <!-- <span style="display: inline-block; width: 20%; text-align: center;">{{
        item.target
      }}</span> -->

        <span style="display: inline-block; width: 25%; margin-left: 10px">
          <input type="text" [(ngModel)]="item.name" />
        </span>
        <span style="display: inline-block; width: 15%; margin-left: 10px">
          <select [(ngModel)]="item.statistictype">
            <option
              *ngFor="let aggtype of dataService.getValidAggregation(item)"
              value="{{ aggtype }}"
            >
              {{ aggtype }}
            </option>
          </select>
        </span>
        <span style="display: inline-block; width: 20%; margin-left: 10px">
          <input type="text" [(ngModel)]="item.parameter" />
        </span>
      </div>
      <div>
        <hr style="color: lightgoldenrodyellow; opacity: 0.35" />
      </div>
    </div>
  </div>
  <br />
  <div style="background-color: rgb(255, 132, 142)">
    <div>
      <span style="width: 25px">
        <button
          type="button"
          style="height: 20px; width: 20px; padding: 0"
          class="btn btn-icon small optbutton"
          aria-label="home"
          (click)="addCalculate()"
        >
          +
        </button>
      </span>

      <span style="display: inline-block; width: 20%; text-align: center">{{
        store.currentLanguage.calculationname
      }}</span>

      <span style="display: inline-block; width: 60%; text-align: center">{{
        store.currentLanguage.calculation
      }}</span>

      <span style="display: inline-block; width: 15%; text-align: center">{{
        store.currentLanguage.parameter
      }}</span>
    </div>
    <div *ngFor="let item of current.caculateterms" style="margin-top: 5px">
      <div>
        <span style="width: 25px">
          <button
            type="button"
            style="height: 20px; width: 20px; padding: 0"
            class="btn btn-icon small optbutton"
            aria-label="home"
            (click)="removecaculate(item)"
          >
            −
          </button>
        </span>

        <span style="display: inline-block; width: 20%; text-align: center">
          <input type="text" [(ngModel)]="item.name" />
        </span>
        <span style="display: inline-block; width: 60%; text-align: center">
          <input type="text" [(ngModel)]="item.form" />
        </span>

        <span style="display: inline-block; width: 15%; text-align: center">
          <input type="text" [(ngModel)]="item.parameter" />
        </span>
      </div>
      <div>
        <hr style="color: lightgoldenrodyellow; opacity: 0.35" />
      </div>
    </div>
  </div>
  <br />
  <dx-popup
    [width]="1080"
    [height]="650"
    [showTitle]="true"
    title="{{ store.currentLanguage.select }}"
    [dragEnabled]="false"
    [closeOnOutsideClick]="true"
    [(visible)]="showlist"
  >
    <div>
      <app-querytarget [(currentlist)]="selectConditions"></app-querytarget>
      <div style="text-align: center; margin-top: 5px">
        <button (click)="selctItems()">{{ store.currentLanguage.ok }}</button>
        <button (click)="cancelItems()">
          {{ store.currentLanguage.cancel }}
        </button>
      </div>
    </div>
  </dx-popup>
</div>
